<template>
  <div class="operation-menu-wrapper">
    <el-upload
      class="upload-demo"
      multiple
      :action="actionUrl"
      :show-file-list="false"
      :data="uploadFileData"
      :on-success="uploadFileSuccess"
      :before-upload="beforeUpload"
    >
      <el-button size="medium" type="primary" icon="el-icon-upload2" id="uploadFileId">上传</el-button>
    </el-upload>

    <el-button size="medium" @click="addFolder()" v-if="!filetype">新建文件夹</el-button>

    <div style="display: inline-block;" v-if="selectionFile.length !== 0">
      <el-button size="medium" icon="el-icon-delete" @click="deleteSelectedFile()">删除</el-button>
      <el-button size="medium" icon="el-icon-edit" @click="moveSelectedFile()" v-if="!filetype">移动</el-button>
      <!-- <el-button size="medium" icon="el-icon-document-copy">拷贝</el-button> -->
      <el-button size="medium" icon="el-icon-download" @click="downloadSelectedFile()">下载</el-button>
    </div>

    <!-- 多选文件下载，页面隐藏 -->
    <a
      target="_blank"
      v-for="(item,index) in selectionFile"
      :key="index"
      :href="item.fileurl"
      :download="item.filename+'.' + item.extendname"
      :title="'downloadLink' + index"
      :ref="'downloadLink' + index"
    ></a>

    <div class="storeDisWrapper" style="float:right;">已使用 {{storageValue}} 容量</div>
  </div>
</template>

<script>
import {
  // deleteFile,
  batchDeleteFile,  
  createFile
} from '@/request/file.js'

import {mapGetters} from 'vuex'
import axios from "axios"

export default {
  name: 'OperationMenu',
  props: {
    selectionFile: Array,
    operationFile: Object,
    storageValue: String
  },
  data() {
    return {
      fileTree: [],
      batchDeleteFileDialog: false,
      loading:null,
      actionUrl:''  
    }
  },
  computed: {
    ...mapGetters(['diskType']),
    //  当前查看的文件路径
    filepath: {
      get() {
        return this.$route.query.filepath
      },
      set() {
        return ''
      }
    },
    //  文件类型索引
    filetype: {
      get() {
        return Number(this.$route.query.filetype)
      },
      set() {
        return 0
      }
    },
    //  上传文件组件参数
    uploadFileData: {
      //加入了空间类型参数------------------------------------------------------
      get() {
        let res = {
          filepath: this.filepath,
          isdir: 0,
          disktype:this.diskType
        }
        return res
      },
      set() {
        return {
          filepath: '/',
          isdir: 0
        }
      }
    }
  },
  created() {
    this.handleEnterDown();
    // this.actionUrl=process.env.NODE_ENV === 'production'?'/public/filetransfer/uploadfile/':'api/filetransfer/uploadfile/';
    this.actionUrl = axios.defaults.baseURL + '/filetransfer/uploadfile/'
  },
  methods: {
    beforeUpload(e){
      this.loading = this.$loading({
          lock: true,
          text: '上传中，请稍等...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    //  上传按钮
    uploadFileSuccess(result) {
      this.loading.close();
      this.loading=null;
      if (result.success) {
        this.$message.success('上传成功')
        this.$emit('getTableDataByType')
        this.$emit('showStorage')
      } else {
        this.$message.error(result.errorMessage)
      }
    },
    //  enter+down 新建文件夹，请不要删除
    handleEnterDown() {
      //  测试enter+down组合键触发事件
      let self = this
      let code1 = 0
      let code2 = 0

      document.onkeydown = function(e) {
        let evn = e || event
        let key = evn.keyCode || evn.which || evn.charCode

        // enter
        if (key === 13) {
          code1 = 13
          e.preventDefault() //禁止默认事件
        }
        // down keyup时及时的 归零
        if (key === 40) {
          code2 = 0
          e.preventDefault() //禁止默认事件
        }
      }
      document.onkeyup = function(e) {
        // enter keyup时及时的 归零
        if (e.keyCode === 13) {
          code1 = 0
        }
        //  down
        if (e.keyCode === 40) {
          code2 = 40
        }
        // enter+down
        if (code1 === 13 && code2 === 40) {
          console.log('enter + down')
          //  这里写你要触发的事件名称
          self.addFolder()
        }
      }
    },
    //  新建文件夹按钮：打开模态框
    addFolder() {
      this.$prompt('请输入文件夹名称', '创建文件夹', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          this.createFile(value)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    },
    //  新建文件夹模态框-确定按钮
    createFile(fileName) {
      //加入了空间类型参数------------------------------------------------------
      let data = {
        filename: fileName,
        filepath: this.filepath,
        isdir: 1,
        disktype:this.diskType
      }
      createFile(data).then(res => {
        if (res.success) {
          this.$message.success('添加成功')
          this.$emit('getTableDataByType')
        } else {
          this.$message.warning(res.errorMessage)
        }
      })
    },

    //  批量操作-删除按钮
    deleteSelectedFile() {
      //加入了空间类型参数------------------------------------------------------
      let data = {
        files: JSON.stringify(this.selectionFile),
        disktype:this.diskType
      }
      const loading = this.$loading({
          lock: true,
          text: '删除中，请稍等',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
      });
      //  批量删除接口
      batchDeleteFile(data).then(res => {
        loading.close();
        if (res.success) {
          this.$message({
            message: '批量删除成功',
            type: 'success'
          })
        } else {
          this.$message.error('失败：' + res.errorMessage)
        }
        this.$emit('getTableDataByType')
        this.$emit('showStorage')
        this.$emit('clearSelectionFile')
      })
    },
    //  批量操作-移动按钮
    moveSelectedFile() {
      this.$emit('setMoveFileDialogData', true, true)
    },
    //  批量操作：下载按钮
    downloadSelectedFile() {
      for (let i = 0; i < this.selectionFile.length; i++) {
        let fileinfo=this.selectionFile[i];
        if (fileinfo.isdir==1) {
          this.$message.warning(`不能直接下载文件夹！ “${fileinfo.filename}”下载失败`);
          continue;
        }
        let name = 'downloadLink' + i
        this.$refs[name][0].click()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.operation-menu-wrapper
  height 60px
  line-height 60px
  .upload-demo
    display inline-block
  .el-button--medium
    margin-left 10px
</style>